<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/item.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
    <style type="text/css">
      .field-tips{
        color: #dd514c;
        font-size: 12px;
      }
      #yes{
        width: 45px;
        height: 45px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg t='1550821030660' class='icon' style='' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2277' xmlns:xlink='http://www.w3.org/1999/xlink' width='45' height='45'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M512 1024C229.229714 1024 0 794.733714 0 511.963429 0 229.193143 229.229714-0.036571 512-0.036571 794.770286-0.036571 1024 229.193143 1024 511.963429 1024 794.733714 794.770286 1024 512 1024ZM512 73.142857C269.641143 73.142857 73.142857 269.641143 73.142857 512 73.142857 754.358857 269.641143 950.857143 512 950.857143 754.358857 950.857143 950.857143 754.358857 950.857143 512 950.857143 269.641143 754.358857 73.142857 512 73.142857ZM464.676571 684.178286 455.826286 692.992 454.107429 691.273143C449.462857 693.467429 444.342857 694.857143 438.857143 694.857143 431.067429 694.857143 424.228571 691.858286 418.304 687.725714L417.426286 688.566857 413.037714 684.178286C413.001143 684.141714 413.001143 684.141714 412.964571 684.105143L262.253714 533.394286 314.002286 481.682286 438.857143 606.537143 714.422857 330.934857 766.171429 382.683429 464.749714 684.105143C464.713143 684.141714 464.713143 684.141714 464.676571 684.178286Z' p-id='2278' fill='%235eb95e'%3E%3C/path%3E%3C/svg%3E");
      }
    </style>
  </head>
  <body>

    <div data-role="page" data-theme="a" id="step1">
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <a data-ajax="false" href="../menus.html" data-icon="carat-l" >返回</a>
        <h3>忘记密码</h3>
      </div>
      <div role="main" class="ui-content">

        <div class="field">
          <div class="item-content">
            <div class="item-inner">
              <div class="flex-content">
                <input type="text" placeholder="请输入注册账号" name="loginName">
              </div>
            </div>
          </div>
          <span class="field-tips"></span>
        </div>

        <div class="field">
          <div class="flex-box">
            <div class="flex-inner">
              <div class="flex-content">
                <input type="text" placeholder="请输入手机号或邮箱地址" name="phoneMail">
              </div>
            </div>
          </div>
          <span class="field-tips"></span>
        </div>

        <div class="field">
          <div class="flex-box">
            <div class="flex-inner">
              <div class="flex-content">
                <input type="text" placeholder="请输入验证码" name="verifyCode">
              </div>
              <div class="flex-title" style="text-align: right;">
                <button id="sendVerifyCodeBtn" class="ui-btn ui-btn-inline ui-btn-warning ui-btn-sm ui-corner-all">发送验证码</button>
              </div>
            </div>
          </div>
          <span class="field-tips"></span>
        </div>

        <div style="margin-top: 15px;">
          <a href="#step2" data-rel="page" data-transition="slide" id="step1Sub" class="ui-btn ui-btn-primary ui-btn-md">下一步</a>
        </div>

      </div><!-- /main -->
    </div>

    <div data-role="page" data-theme="a" id="step2">
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <a data-ajax="false" data-rel="back" data-icon="carat-l" >返回</a>
        <h3>重置密码</h3>
      </div>
      <div role="main" class="ui-content">

        <div class="flex-box">
          <div class="flex-inner">
            <div class="flex-content">
              <input type="text" placeholder="请输入8-16个字符，区分大小写" name="newPassword">
            </div>
          </div>
        </div>

        <div>
          <a id="step2Sub" href="#step3" data-rel="page" data-transition="slide" class="ui-btn ui-btn-primary ui-btn-md">重置密码</a>
        </div>
      </div>
    </div>

    <div data-role="page" data-theme="a" id="step3">
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <a data-ajax="false" data-rel="back" href="#step1" data-icon="carat-l" >返回</a>
        <h3>修改成功</h3>
      </div>
      <div role="main" class="ui-content">

        <div class="yes">

        </div>

        <div class="flex-box">
          <div class="flex-inner">
            <div class="flex-title">
              <div id="yes"></div>
            </div>
            <div class="flex-content">密码修改成功！</div>
          </div>
        </div>

        <div>
          <button class="ui-btn ui-btn-default ui-btn-md ui-corner-all">返回</button>
        </div>
      </div>
    </div>

    <script type="text/javascript">

      function unvalid(e, message){
        e.parents('.field').find('.field-tips').text(message).show();
      }

      function clearUnvalidMessage(){
        $('.field-tips').text('');
      }

      $(document).on({
        pagecreate: function(){
          var $page = $(this);

          // 发送手机验证码
          $page.on('click', '#sendVerifyCodeBtn', function(){
            var $btn = $(this);

            var $phoneMail = $('[name=phoneMail]', $page);
            var phoneMail = $phoneMail.val();
            if(!phoneMail.trim()){
              alert('您还没有输入手机号或邮箱地址哦！');
              return;
            }

            // 发送请求

            // 倒计时
            $btn.prop('disabled', true).addClass('disabled');
            var originWidth = $btn.outerWidth();
            var time = 60;
            setCountDown(time);
            var timer = setInterval(function(){
              setCountDown(--time);
              if(time <= 0){
                clearInterval(timer);
                $btn.prop('disabled', false).removeClass('disabled').text('发送验证码');
              }
            }, 1000);

            function setCountDown(time){
              $btn.text(time).css('width', originWidth);
            }
          });
          
          // 下一步
          $(this).on('click', '#step1Sub', function(){
            var valid = true;
            var $loginName = $('[name=loginName]', $page);
            var $phoneMail = $('[name=phoneMail]', $page);
            var $verifyCode = $('[name=verifyCode]', $page);
            var loginName = $loginName.val();
            var phoneMail = $phoneMail.val();
            var verifyCode = $verifyCode.val();

            if(!loginName || !loginName.trim()){
              valid = false;
              unvalid($loginName, '请输入注册账号');
            }
            if(!phoneMail || !phoneMail.trim()){
              valid = false;
              unvalid($phoneMail, '请输入手机号或邮箱地址');
            }
            if(!verifyCode || !verifyCode.trim()){
              valid = false;
              unvalid($verifyCode, '请输入手机验证码');
            }

            if(valid){
              clearUnvalidMessage();
              // 发送请求
            }

            return valid;
          });



        }
      }, '[data-role=page]#step1');

      $(document).on({
        pagecreate: function(){
          $(this).on('click', '#step2Sub', function(){
            
            
            
          });
        }
      }, '[data-role=page]#step2');
    </script>
  </body>
</html>